<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/makeMoney.css" rel="stylesheet" />
	</head>

	<body>
		
		
		<div id="app">
			
			
			<!-- <header class="mui-bar mui-bar-nav">
				<h1 class="mui-title">打工赚钱</h1>
			</header> -->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">打工赚钱</h1>
			</header>
			
			
			<div class="mui-content">
				
				<div class="mui-card">
					<div class="mui-card-header mui-card-media"
						style="height:40vw;background-image:url(pic/working.gif)">
					</div>
				</div>
				<p >{{text1Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text1Show!=answer1&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer1" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<p >{{text2Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text2Show!=answer2&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer2" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<p >{{text3Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text3Show!=answer3&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer3" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<p >{{text4Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text4Show!=answer4&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer4" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<p >{{text5Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text5Show!=answer5&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer5" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<p >{{text6Show}}</p>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<!-- <label>输入上面的数据库密码</label> -->
						<input :style="{border:(text6Show!=answer6&&commitClick==1?'3px solid red':'3px solid #fff')}" type="text" v-model="answer6" class="mui-input-clear" placeholder="">
					</div>
				</form>
				
				<button type="button" class="mui-btn mui-btn-blue" @click="commit()">输入相同内容并提交</button>
				<!-- <span class="mui-badge mui-btn-blue" @click="commit()">提交</span> -->
			</div>
			
			
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		<script src="js/util.js"></script>
		<script src="js/db.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue-min.js"></script>
		<script type="text/javascript">
			mui.init()
			
			
			var app = new Vue({
				el:'#app',
				data:{
					commitClick:0,
					text:'',
					userText:'',
					userInfo:{},
					text1Show:'var app = new Vue({})',
					text2Show:'el:"#app",',
					text3Show:'data:{},',
					text4Show:'methods:{},',
					text5Show:'mounted(){}',
					text6Show:'console.log("vue load successs")',
					
					// text1:'软件生命开发周期:',
					// text2:'需求分析',
					// text3:'软件设计',
					// text4:'软件开发',
					// text5:'软件测试',
					// text6:'运行维护',
					
					questionList:[{
						text1:'需求分析的主要目标是收集用户需求',
						text2:'确认需求是至关重要的',
						text3:'需求分析帮助明确系统功能',
						text4:'了解用户期望和需求',
						text5:'形成文档记录需求',
						text6:'确保项目成功的基础',
					},{
						text1:'功能需求描述系统的具体功能',
						text2:'非功能需求描述性能和属性',
						text3:'功能需求通常是必需的',
						text4:'非功能需求可能是可选的',
						text5:'两者都需文档记录',
						text6:'理解两者差异有助于开发',
					},{
						text1:'访谈是有效的需求获取方式',
						text2:'问卷调查可以收集大量意见',
						text3:'用例图不属于获取技术',
						text4:'数据流图主要描述数据流动',
						text5:'需求获取需多种方法结合',
						text6:'理解不同技术的应用场景',
					},{
						text1:'确保用户需求被全面考虑',
						text2:'识别利益相关者有助于沟通',
						text3:'了解各方期望和需求',
						text4:'关注利益相关者的反馈',
						text5:'确保项目的顺利推进',
						text6:'增强项目的可接受性和成功率',
					},{
						text1:'模块化提高系统的可维护性',
						text2:'促进代码的重用性',
						text3:'降低系统的复杂性',
						text4:'提高团队的开发效率',
						text5:'支持分布式开发和测试',
						text6:'易于进行功能扩展和修改',
					},{
						text1:'每个服务独立部署和运行',
						text2:'促进系统的灵活性和可扩展性',
						text3:'支持技术栈的异构性',
						text4:'各服务之间通过API通信',
						text5:'减少了服务间的依赖性',
						text6:'适合大规模的分布式系统',
					},{
						text1:'创建型模式关注对象创建',
						text2:'工厂模式是常见的创建型模式',
						text3:'观察者模式属于行为型模式',
						text4:'策略模式也属于行为型模式',
						text5:'需求获取需多种方法结合',
						text6:'理解不同设计模式的分类',
					},{
						text1:'需求评审是关键活动',
						text2:'确保需求的准确性和完整性',
						text3:'识别潜在的问题和风险',
						text4:'促进团队间的沟通与理解',
						text5:'需求评审需各方参与',
						text6:'增强项目的成功概率',
					},{
						text1:'数据流图描述数据的流动',
						text2:'主要用于分析系统功能',
						text3:'帮助识别输入与输出',
						text4:'视觉化数据处理过程',
						text5:'辅助需求获取和文档化',
						text6:'提高系统设计的透明度',
					},{
						text1:'原型设计用于验证需求',
						text2:'收集用户反馈以改进设计',
						text3:'促进用户参与设计过程',
						text4:'减少需求变更的风险',
						text5:'加速开发过程的理解',
						text6:'帮助团队对齐目标和期望',
					},{
						text1:'关系型数据库支持结构化数据',
						text2:'非关系型数据库更灵活',
						text3:'关系型数据库适合复杂查询',
						text4:'选择数据库要考虑项目需求',
						text5:'理解两种数据库的特性',
						text6:'做出合理的技术决策',
					},{
						text1:'持续集成提高代码质量',
						text2:'快速反馈促进团队改进',
						text3:'定期构建有助于发现问题',
						text4:'支持快速交付和部署',
						text5:'提高团队的协作效率',
						text6:'降低发布过程的风险',
					},{
						text1:'松耦合提高系统灵活性',
						text2:'促进模块的独立发展',
						text3:'降低模块间的依赖性',
						text4:'易于进行功能扩展和修改',
						text5:'提高系统的可维护性',
						text6:'有助于项目的长期发展',
					},{
						text1:'响应时间小于2秒是非功能需求',
						text2:'支持1000个并发用户是非功能需求',
						text3:'多语言支持也属于非功能需求',
						text4:'功能需求涉及具体的系统操作',
						text5:'了解需求分类有助于开发',
						text6:'两者都需明确记录和管理',
					},{
						text1:'需求文档记录功能和非功能需求',
						text2:'需清晰描述需求来源',
						text3:'包含用户期望和系统目标',
						text4:'有助于团队理解项目方向',
						text5:'文档需定期更新和维护',
						text6:'确保所有人对需求的共识',
					},{
						text1:'如何避免redis缓存击穿现象',
						text2:'使用热点数据预热缓存',
						text3:'实现请求排队机制',
						text4:'设置合理的缓存过期时间',
						text5:'加锁处理缓存未命中情况',
						text6:'采用多级缓存策略提升效率',
					},{
						text1:'如何利用redis实现缓存预热',
						text2:'提前加载常用数据到缓存',
						text3:'定时任务更新缓存内容',
						text4:'在系统启动时加载数据',
						text5:'监控热点数据并预热',
						text6:'使用数据访问日志分析需求',
					},{
						text1:'如何使用rabbitmq实现延时操作',
						text2:'设置延时队列以处理消息',
						text3:'使用死信队列实现延时',
						text4:'在消息中添加延迟属性',
						text5:'配置生存时间设置',
						text6:'消费者定期检查和处理消息',
					},{
						text1:'rabbitmq常用的几种模式有哪些',
						text2:'发布订阅模式广播消息',
						text3:'工作队列模式分配任务',
						text4:'路由模式按规则发送消息',
						text5:'主题模式支持模糊匹配',
						text6:'请求响应模式实现同步通信',
					},{
						text1:'请写出pdman数据库建模工具的操作步骤',
						text2:'创建新项目和新模块',
						text3:'创建表格',
						text4:'创建关系图',
						text5:'完善数据字典',
						text6:'生成数据库脚本和导出数据库建模文档',
					},{
						text1:'秒杀过程中出现的库存超卖怎么办',
						text2:'使用分布式锁控制库存访问',
						text3:'库存预扣减提高系统吞吐量',
						text4:'异步处理减少并发压力',
						text5:'限流与熔断保护系统稳定性',
						text6:'监控与预警快速响应问题',
					}],
					
					answer1:'',
					answer2:'',
					answer3:'',
					answer4:'',
					answer5:'',
					answer6:''
				},
				methods:{
					commit(){
						this.commitClick = 1
						if(this.text1Show == this.answer1 &&this.text2Show==this.answer2
						&&this.text3Show==this.answer3&&this.text4Show==this.answer4
						&&this.text5Show==this.answer5&&this.text6Show==this.answer6){
							let that = this
							mui.alert('完成工作!奖励200!',function(){
								let userInfo = JSON.parse(Database.getData('userInfo'))
								userInfo.parentMoney += 200
								userInfo.todayWorkCount += 1
								that.commitClick = 0
								Database.saveData('userInfo',JSON.stringify(userInfo))
								document.location.href = 'createNiumaInfo.html'
							})
						}else{
							mui.toast('输入错误！')
						}
					}
				},
				mounted(){
					// for (var i = 0; i < 2; i++) {
					// 	this.text += Math.floor(Math.random()*10)
					// }
					let random = Math.floor(Math.random()*this.questionList.length)
					this.text1Show = this.questionList[random].text1
					this.text2Show = this.questionList[random].text2
					this.text3Show = this.questionList[random].text3
					this.text4Show = this.questionList[random].text4
					this.text5Show = this.questionList[random].text5
					this.text6Show = this.questionList[random].text6
					
					this.userInfo = JSON.parse(Database.getData('userInfo'))
					
					if(this.userInfo == null){
						document.location.href = 'birth.html'
					}
				}
			})
			
			
		</script>
	</body>

</html>